/*
 * @Author: funlee 
 * @Email: i@funlee.cn 
 * @Date: 2017-12-12 11:28:24 
 * @Last Modified time:   2017-12-12 11:28:24 
 * @Description: 百度地图--瓦片图
 *               瓦片坐标系的原点在左上角，向上为y轴正方向，向右为x轴正方向。
 *               具体到地图上来讲，地球经过投影，投影到一个平面上，平面最左边对应地球最西边，平面最上边对应地球最北边。
 *               原点就处于整个平面的左上角，即地球的西北角，从北向南为y轴负方向，从西向东为x轴正方向。
 * 
 *               并不是所有在线的瓦片地图都是采用这样的坐标系
 *          
 */
import ol from 'openlayers'
import 'openlayers/dist/ol.css'

export default () => {
  // 自定义分辨率和瓦片坐标系
  var resolutions = [];
  var maxZoom = 18;

  // 计算百度使用的分辨率
  for (var i = 0; i <= maxZoom; i++) {
    resolutions[i] = Math.pow(2, maxZoom - i);
  }
  var tilegrid = new ol.tilegrid.TileGrid({
    origin: [0, 0],    // 设置原点坐标
    resolutions: resolutions    // 设置分辨率
  });

  // 创建百度地图的数据源
  var baiduSource = new ol.source.TileImage({
    projection: 'EPSG:3857',
    tileGrid: tilegrid,
    tileUrlFunction: function (tileCoord, pixelRatio, proj) {
      var z = tileCoord[0];
      var x = tileCoord[1];
      var y = tileCoord[2];

      // 百度瓦片服务url将负数使用M前缀来标识
      if (x < 0) {
        x = 'M' + (-x);
      }
      if (y < 0) {
        y = 'M' + (-y);
      }
      return "http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=" + x + "&y=" + y + "&z=" + z + "&styles=pl&udt=20160426&scaler=1&p=0";
    }
  });

  // 百度地图层
  var baiduMapLayer2 = new ol.layer.Tile({
    source: baiduSource
  });

  // 创建地图
  new ol.Map({
    layers: [
      baiduMapLayer2
    ],
    view: new ol.View({
      // 设置成都为地图中心
      center: ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
      zoom: 10
    }),
    target: 'map'
  });
}
